<template>
  <el-dialog v-model="pup.state" :width="proxy.$size(pup.width, 'calc(100% - 30px)')" :style="{
    height: proxy.$size(pup.height, 'calc(100vh - 30px)'),
    maxHeight: 'calc(100vh - 30px)',
  }" class="pupBox" :class="{
    pupBg: isBg
  }" v-if="pup.state">
    <div class="pup-head">
      <div class="pup-left">
        <h3>{{ pup.title }}</h3>
        <slot name="headL" />
      </div>
      <div class="pup-right">
        <slot name="headR" />
        <ElPopoverBox height="80vh" placement="right">
          <template #btn>
            <el-icon>
              <Warning />
            </el-icon>
          </template>
          <el-scrollbar>
            <json-viewer :value="json || pup" expanded :copyable="{
              copyText: '复制',
              copiedText: '复制成功',
            }"></json-viewer>
          </el-scrollbar>
        </ElPopoverBox>
        <el-icon @click="closeBtn">
          <Close />
        </el-icon>
      </div>
    </div>
    <div class="pup-tbody" element-loading-text="数据加载中...">
      <el-scrollbar>
        <div class="pup-main">
          <slot />
        </div>
      </el-scrollbar>
    </div>
    <div class="pup-foot" v-if="($slots.footL || $slots.footR) && isFoot">
      <div class="pup-left">
        <slot name="footL" />
      </div>
      <div class="pup-right">
        <el-button type="" @click="closeBtn">取消</el-button>
        <slot name="footR" />
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    pup?: any;
    json?: any;
    isBg?: boolean;
    isFoot?: boolean;
  }>(),
  {
    isFoot: true,
  },
);

onMounted(() => {

});
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'closeBtn'): void;
}>();
const closeBtn = () => {
  proxy.$closePup(props.pup)
  emit('closeBtn')
}
</script>
<style lang="scss">
//弹出
.el-dialog {
  --p: 12px;

  &.pupBg {
    .pup-tbody {
      background-color: $bg;
    }
  }

  &.pupBox {
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;

    .el-dialog__header {
      display: none;
    }

    .el-dialog__body {
      padding: 0;
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;

      >* {
        position: relative;

        &:not(:last-child) {
          border-bottom: 1px $border solid;
        }
      }

      .pup-head,
      .pup-foot {
        height: 50px;
        color: $black;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--p);

        >* {
          display: flex;
          align-items: center;

          &:not(:last-child) {
            margin-right: 6px;
          }

          >* {
            display: flex;
            align-items: center;

            &:not(:last-child) {
              margin-right: 6px;
            }
          }
        }

        .el-icon {
          width: 28px;
          height: 28px;
          border-radius: 4px;
          cursor: pointer;

          &:hover {
            color: $white;
            background-color: $error;
          }
        }
      }

      .pup-tbody {
        flex: 1;
        overflow: hidden;

        .pup-main {
          padding: var(--p);
        }
      }
    }

  }
}
</style>
